<template>
    <div class="table">
        <div class="container">
            <el-row>
                <el-col :span="6">
                    <el-card class="left-card">
                        <el-scrollbar class="scroll-tree">
                        <el-tree
                            ref="orgTree"
                            :props="props"
                            :load="loadNode"
                            lazy
                            :default-expand-all="true"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            @node-click="handleNodeClick">
                            <span class="custom-tree-node" slot-scope="{ node,data }">
                            <svg class="icon" aria-hidden="true" v-if="data.orgType ==1">
                                <use xlink:href="#icon-org"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true" v-if="data.orgType ==2">
                                <use xlink:href="#icon-dept"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true" v-if="data.orgType ==3">
                                <use xlink:href="#icon-post"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true" v-if="data.orgType ==4">
                                <use xlink:href="#icon-person2"></use>
                            </svg>
                            <span style="margin-left:5px">{{ node.label }}</span>
                            </span>
                        </el-tree>
                        </el-scrollbar>
                    </el-card>
                    </el-col>
                    <el-col :span="18">
                    <el-card class="right-card">
                        <div class="handle-box">
                            <el-button type="primary" size="mini" class="handle-del mr10" @click="add">新增</el-button>
                            <el-input v-model="keyword" size="mini"  placeholder="筛选名称" class="handle-input mr10"></el-input>
                            <el-button type="primary" size="mini"  icon="search" @click="query">筛选</el-button>
                        </div>
                        <el-table style="width:100%" :data="tableData.records"  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                            <el-table-column type="index" label="序号" align="center" width="50"/>
                                    
                                    <el-table-column prop="fdName" label="名称" sortable />
                                    <el-table-column prop="fdNo" label="编号" sortable />
                                    <el-table-column prop="fdParentName" label="所属部门" sortable width="150"/>
                                    <el-table-column prop="fdParentOrgName" label="所属机构" sortable width="150"/>
                                    <el-table-column prop="fdIsAvaliable" label="是否有效"  width="100">
                                        <template slot-scope="scope">
                                            <el-switch v-model="scope.row.fdIsAvaliable" :disabled="true"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
                            <el-table-column label="操作" width="250" align="center">
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini"  @click="handleView(scope.row)">查看</el-button>
                                    <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
                        </div>
                    </el-card>
                    </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import dateUtil from '@/utils/dateUtils';
    export default {
        name: 'SysOrgPostList',
        data() {
            return {
                tableData:{
                    keyword: '',
                    size:0,
                    total:0,
                    current:1,
                    records: []
                },
                keyword: '',
                currentTreeValue:'',
                currentTreeOrgType:'',
                defaultExpandTreeNode: [],
                props: {
                  label: 'name'
                },
                RootNode: {"id":"","name":"组织架构",orgType:""}
            }
        },
        created() {
            this.getData();
        },
        methods: {
            add() {
                const params = {
                    path: "/sys/org/sys_org_post/edit",
                    query: {fdParentId:this.currentTreeValue}
                }
                this.$common.openTag(params);  
            },
            getData() {
                this.$post('/api/sys/org/sys_org_post/list',{
                    keyword: this.tableData.keyword,
                    current: this.tableData.current,
                    fdParentId: this.currentTreeValue,
                    fdOrgType: this.currentTreeOrgType
                }).then((res) => {
                    this.tableData = res.data;
                    console.log(res.data);
                });
            },
            query(){
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            dateFormat(obj,column){
                return dateUtil.format(obj.fdCreateTime);
            },
            handleEdit(row){
                let id = row.fdId;
                this.$common.openTag({
                    path: "/sys/org/sys_org_post/edit",
                    query: {id:id}
                });
            },
            handleView(row){
                let id = row.fdId;
                this.$common.openTag({
                    path: "/sys/org/sys_org_post/view",
                    query: {id:id}
                });
            },
            handleDelete(index,row){
                this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                    this.$delete('/api/sys/org/sys_org_post',{
                        id:row.fdId
                    }).then((res) => {
                        this.tableData.records.splice(index,1)
                        this.$message({type:'success',message:'删除成功!'})
                    });
                })
            },
            handleCurrentChange(value){
                this.tableData.current = value;
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            loadNode(node, resolve) {
              if (node.level === 0) {
                this.getTreeData({},(data)=>{
                  let tree = [this.RootNode];
                  resolve(tree);
                });
              } else {
                this.getTreeData(node.data,(data)=>resolve(data));
              }
            },
            getTreeData(data,callback){
              let params = {
                fdParentId:data.id,
                fdParentType:data.orgType,
                fdOrgType:"ORG|DEPT"
              }
              this.$fetch('/api/sys/org/sys_org_element/treeData',params).then((res) => {
                if(res.status==1){
                  return callback(res.data);
                }
              });
            },
            handleNodeClick(data) {
              this.currentTreeValue = data.id;
              this.currentTreeOrgType = data.orgType;
              if(data.orgType == 1) return;
              this.getData();
            }
        }
    }
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
